<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>群防群治</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	<style>
		.deptTree {
			position: absolute;  /* 或者 position: fixed; */
			z-index: 999;  /* 确保 deptTree 在 map 上方 */
			width: 280px;
			height: 100%;
			background-color: #ffffff;
		}
		.leftTool {
			position: absolute;  /* 将 div 定位 */
			top: 20px;
			left: calc(280px + 20px);
			background-color: #ffffff;
			padding: 10px;
			border-radius: 5px;  /* 可选：增加圆角 */
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
			z-index: 100;  /* 确保它浮动在地图之上 */
		}
		.rightTool {
			position: absolute;  /* 将 div 定位 */
			top: 20px;
			right: 20px;
			background-color: #ffffff;
			padding: 10px;
			border-radius: 5px;  /* 可选：增加圆角 */
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
			z-index: 100;  /* 确保它浮动在地图之上 */
		}
		#map {
			position: relative;
		}
	</style>

</head>
<body style="overflow-x: hidden">

<div class="layui-row layui-col-space15">
	<div>
		<div class="deptTree">
			<div id="deptTree" style="margin-top: 50px;margin-left: 20px;"></div>
		</div>
		<div id="map" style="width: 100%;height: 700px"></div>
		<div class="leftTool">
			<input type="text" id="tipinput"  placeholder="请输入地点名称" />
		</div>
		<div class="rightTool layui-form">
			<input type="checkbox" name="AAA" title="巡防单元总数">
			<input type="checkbox" name="AAA2" title="实时在线">
			<input type="checkbox" name="AAA3" title="在线终端">
		</div>
	</div>
</div>


<!--</div>-->
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script type="text/javascript">
	window._AMapSecurityConfig = {
		securityJsCode: '21a0976b537e2773d9e693870e817f75',
	}
</script>
<script type="text/javascript"
		src="https://webapi.amap.com/maps?v=2.0&key=68f1f25ca91ea12526afea0282eaff1e"></script>
<script src="https://a.amap.com/jsapi_demos/static/geojson/shanghai.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
	layui.use(['layer','admin','tree', 'echarts', 'carousel', 'element', 'table', 'count'], function() {
		let $ = layui.jquery;
		let admin = layui.admin;
		let tree = layui.tree;

		var admin2 = $(".pear-admin");
		var right = $(".layui-icon-shrink-right");
		right.addClass("layui-icon-spread-left");
		right.removeClass("layui-icon-shrink-right");
		admin2.addClass("pear-mini");

		//$('#sideMenu').collapse()

		$.get('/sys/dept/layuiTree', function(result){
			tree.render({
				elem: '#deptTree',
				data: result,
				showCheckbox: false,  // 是否显示复选框
				showLine: true,  // 是否开启连接线
				onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
				//id: 'deptTree',
				isJump: false, // 是否允许点击节点时弹出新窗口跳转
				click: function(obj) {
					let data = obj.data;  //获取当前点击的节点数据
					onDeptId = data.id;
					window.refresh({ deptId: data.id });
					// 点击高亮
					$(".layui-tree-set").removeClass('layui-tree-set-active');
					obj.elem.addClass('layui-tree-set-active');

				}
			});
		});

		//地图加载
		var map = new AMap.Map("map", {
			center: [121.045332, 31.19884],
			zoom: 8.8,
			// resizeEnable: true表示地图在窗口大小变化时自适应调整大小
			resizeEnable: true
		});
		//输入提示
		var autoOptions = {
			input: "tipinput"
		};

		// 加载AMap.PlaceSearch和AMap.AutoComplete插件。这两个插件提供了地点搜索和地址输入提示的功能
		AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
			// 用于地址输入提示功能
			var auto = new AMap.AutoComplete(autoOptions);
			var placeSearch = new AMap.PlaceSearch({
				map: map
			});  //构造地点查询类
			auto.on("select", select);//注册监听，当选中某条记录时会触发
			function select(e) {
				placeSearch.setCity(e.poi.adcode);
				placeSearch.search(e.poi.name);  //关键字查询查询
			}
		});

		function addPolygon(data) {
			let polygon = new AMap.Polygon({
				path: data,
				fillColor: '#dcc0bd',
				strokeOpacity: 1,
				fillOpacity: 0.5,
				strokeColor: '#bd2612',
				strokeWeight: 1,
				strokeStyle: 'dashed',
				strokeDasharray: [5, 5],
			});
			polygon.on('mouseover', () => {
				polygon.setOptions({
					fillOpacity: 0.7,
					fillColor: '#bd2612'
				})
				map.setDefaultCursor('pointer');
			})
			polygon.on('mouseout', () => {
				polygon.setOptions({
					fillOpacity: 0.5,
					fillColor: '#dcc0bd'

				})
				map.setDefaultCursor('default');
			})
			map.add(polygon);
		}
		addPolygon(shanghai);
		addPolygon(suzhou);
		addPolygon(wuxi);



	});
</script>
</body>
</html>
